<template>
  <div class="Maintenance">
    <!-- header -->
    <div class="header">
      <h2>用户管理</h2>
      <div class="buttons">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="add"
          >新增</el-button
        >
        <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
        
      
      </div>
    </div>
    <!-- header -->
    <!--  -->
    <!-- table -->
    <el-table
      :data="tableData.filter(
          (data) =>
            !search ||
            data.adminName.toLowerCase().includes(search.toLowerCase())
        )"
      style="width: 100%"
      height="650"
      border
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="adminName" label="用户账号" >
      </el-table-column>
      <el-table-column prop="userName" label="用户姓名" >
      </el-table-column>
      <el-table-column prop="role" label="角色" >
      </el-table-column>
      <el-table-column prop="rolecode" label="角色码" >
      </el-table-column>
      <el-table-column prop="adminAge" label="年龄" sortable>
      </el-table-column>
      <el-table-column prop="adminSex" label="性别" >
      </el-table-column>
      <el-table-column
        prop="adminWorkYears"
        label="工作年限"
        sortable
      >
      </el-table-column>
      <el-table-column fixed="right" width="165">
        <template slot="header" slot-scope="">
          <el-input v-model="search" size="mini" placeholder="输入用户账号搜索" />
        </template>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- table -->
    <!--  -->
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @current-change="current_change"
        background
        layout="prev, pager, next"
        :total="blockall"
      >
      </el-pagination>
    </div>
    <!-- 分页 -->
    <!--  -->
    <!-- 详情 -->
    <el-drawer
      title="详情"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="cancel"
      :size="500"
    >
      <div class="details">
        <div class="details-main">
          <!-- 表单 -->
          <div>用户信息</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="用户账号">
              {{ details.adminName }}
            </el-form-item>
            <el-form-item label="用户姓名">
              {{ details.userName }}
            </el-form-item>
            <el-form-item label="年龄">
              {{ details.adminAge }}
            </el-form-item>
            <el-form-item label="工龄">
              {{ details.adminWorkYears }}
            </el-form-item>
            <el-form-item label="角色">
              {{ details.role }}
            </el-form-item>
          </el-form>
          <!-- 表单 -->
        </div>
        <div class="drawer__footer">
          <el-button type="primary" @click="cancel"> 确 定 </el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 详情 -->
    <!--  -->

    <!-- 添加 -->
    <el-dialog title="新增" :visible.sync="dialogAddVisible">
      <div class="add">
        <el-form ref="addform" :model="addform" label-width="80px" :rules="rules" >
          <el-form-item label="用户账号" prop="adminName">
            <el-input
              type="text"
              v-model="addform.adminName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户ID" prop="adminId">
            <el-input
              type="text"
              v-model="addform.adminId"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input
              type="text"
              v-model="addform.password"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户姓名" prop="userName">
            <el-input
              type="text"
              v-model="addform.userName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色"  prop="role">
            <el-input
              type="text"
              v-model="addform.role"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色码" prop="rolecode">
            <el-input
              type="text"
              v-model="addform.rolecode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄"  prop="adminAge">
            <el-input
              type="text"
              v-model="addform.adminAge"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="工龄" prop="adminWorkYears">
            <el-input
              type="text"
              v-model="addform.adminWorkYears"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="adminSex">
            <el-radio-group v-model="addform.adminSex">
              <el-radio label="男" name="男"></el-radio>
              <el-radio label="女" name="女"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onAddSubmit(addform)"
              >提交</el-button
            >
            <el-button @click="dialogAddVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 添加 -->
  </div>
</template>

<script>
import {
 
  useraddlink,
  adminfindall,
  
} from "../../apis/login";

export default {
  components: {},
  mounted() {
    adminfindall().then((ok)=>{
      console.log(ok);
      this.tableData=ok.data.data;
    })
    // 模拟数据
    // checkuserjson().then((ok)=>{
    //   console.log(ok);
    //   this.tableData=ok.data;
    // })

  },
  methods: {
    // findcode(role){
    //   adminfindcode(role).then((ok)=>{
    //     console.log(ok);
    //   })
    // },
    //页码
    current_change(i) {
      console.log(i);
      this.index = i;
      //分页查询
      // wbList(i).then((ok) => {
      //   console.log(ok);
      //   this.tableData = ok.data;
      // });
    },
    //编辑
    change(row) {
      this.details = row;
      this.dialogChangeVisible = true;
    },
    //编辑提交
    // onChangeSubmit(obj) {
    //   // console.log("新增", obj);
    //   if (this.dialogChangeVisible) {
    //     changewb(obj).then((ok) => {
    //       console.log(ok);
    //       if (ok.status === 200) {
    //         this.dialogChangeVisible = false;
    //       }
    //     });
    //   }
    // },
    //新增按钮
    add() {
      this.dialogAddVisible = true;
    },
    //随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //随机id
    randomID() {
      let reID = "";
      for (let i = 0; i < 6; i++) {
        reID += this.randomNum(0, 9);
      }
      return reID / 1;
    },
    //新增提交
    onAddSubmit(obj) {
      console.log("add",obj);
      this.$refs['addform'].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      //  后台接口
      useraddlink(obj).then((ok) => {
        console.log(ok);
        if (ok.data.code === 200) {
          this.dialogAddVisible = false;
          //总页数
          adminfindall().then((ok) => {
            this.tableData = ok.data.data;
          });
          //当前页
          // wbList(this.index).then((ok) => {
          //   this.tableData = ok.data;
          // });
        }
      });

      // 模拟数据
      // adduserjson(obj).then((ok) => {
      //   console.log(ok);
      //   // if (ok.status === 201) {
      //   //   this.dialogAddVisible = false;
      //   //   //总页数
      //   //   wbAllList().then((ok) => {
      //   //     this.blockall = ok.data.length;
      //   //   });
      //   //   //当前页
      //   //   wbList(this.index).then((ok) => {
      //   //     this.tableData = ok.data;
      //   //   });
      //   // }
      // });
    },
    //删除
    // del(row) {
    //   console.log(row);
    //   delwb(row).then(() => {
    //     //总页数
    //     wbAllList().then((ok) => {
    //       this.blockall = ok.data.length;
    //     });
    //     //当前页
    //     wbList(this.index).then((ok) => {
    //       console.log(ok.data.length);
    //       if (ok.data.length == 0) {
    //         console.log(this.index--);
    //         wbList(this.index).then((ok) => {
    //           this.tableData = ok.data;
    //         });
    //       }
    //     });
    //   });
    // },
    //详情取消
    cancel() {
      this.drawer = false;
    },
    // 关闭详情抽屉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //查看
    handleClick(row) {
      console.log(row);
      this.drawer = !this.drawer;
      this.details = row;
    },
  },
  data() {
    return {
      //当前页码
      index: 1,
      //分页总数
      blockall: 1,
      // 编辑对话框
      dialogChangeVisible: false,
      //添加对话框
      dialogAddVisible: false,

      //抽屉
      direction: "rtl",
      drawer: false,
      //搜索
      search: "",
      //列表
      tableData: [],
      //详情
      details: {},
      //添加表单
      addform: {
        adminAge: "",
        adminId: "",
        adminName: "",
        adminSex: "",
        adminWorkYears: "",
        password: "",
        role: "",
        rolecode: "",
        userName:""              
      },
      
       rules: {
          adminAge: [
            { type:"string",required: true, message: '请填写', trigger: 'blur' }
          ],
          adminId: [
            { required: true, message: '请填写', trigger: 'change' }
          ],
          adminName: [
            {  required: true, message: '请填写', trigger: 'change' }
          ],
          adminSex: [
            { required: true, message: '请填写', trigger: 'change' }
          ],
          adminWorkYears: [
            { required: true, message: '请填写', trigger: 'change' }
          ],
          password: [
            { required: true, message: '请填写', trigger: 'change' }
          ],
          rolecode: [
            { required: true, message: '请填写', trigger: 'blur' }
          ],
          role: [
            { required: true, message: '请填写', trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请填写', trigger: 'blur' }
          ],
        }
    };
  },
};
</script>

<style lang="scss" scoped>
.Maintenance {
  // height: 100%;
  // width: auto;
  // min-width: 444px;
  min-height: 800px;
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  position: relative;

  //头部
  .header {
    h2 {
      margin: 5px 0;
      font-size: 18px;
      font-weight: 400;
    }
    .buttons {
      margin: 20px 0;
      
    }
  }
  //详情
  .details {
    height: 100%;
    display: flex;
    flex-direction: column;
    .details-main {
      margin-top: 50px;
      padding: 20px;
      flex: 1;
    }
    .drawer__footer {
      display: flex;
      justify-content: center;
    }
  }
  //分页
  .block {
    margin: 10px 0;
  }
}
</style>